<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <script src="js/jquery.min.js"></script>
  <!-- <script src="https://unpkg.com/vue@next"></script> -->
  <script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
  <div id="app">
    {{ counter }}
    <h1>查看所有项目数据</h1>
    <button @click="getData">获取数据</button>
    <div class="introduce-section">
      <div class="title">
        <text class="label">项目名称：</text>
        <text class="value">{{goods.shopName || '-'}}</text>
      </div>
      <div class="bot-row">
        <div class="label">进度：</div>
        <div class="value progress-box">
          <div class="progress-bar">
            <div class="progress-container">
              <div class="progress" :style="{ width: (goods.jindu * 100 || 0) + '%' }">
                {{goods.jindu * 100 || 0}}%
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bot-row">
        <text class="label">乡镇：</text>
        <text class="value">{{goods.area || '-'}}</text>
      </div>
      <div class="bot-row">
        <text class="label">片区：</text>
        <text class="value">{{goods.pianarea || '-'}}</text>
      </div>
      <div class="bot-row">
        <text class="label">标段：</text>
        <text class="value">{{goods.biaoduan || '-'}}</text>
      </div>
      <div class="bot-row">
        <text class="label">现场负责人：</text>
        <text class="value">{{goods.fuzerenname || '-'}}</text>
      </div>
      <div class="bot-row">
        <text class="label">负责人电话：</text>
        <text class="value">{{goods.shigongPhone || '-'}}</text>
      </div>
      <div class="bot-row">
        <text class="label">施工单位：</text>
        <text class="value">{{goods.shigongdanwei || '-'}}</text>
      </div>
      <div class="bot-row">
        <text class="label">监理：</text>
        <text class="value">{{goods.jianliname || '-'}}</text>
      </div>
      <div class="bot-row">
        <text class="label">监理电话：</text>
        <text class="value">{{goods.jianliPhone || '-'}}</text>
      </div>
      <div class="bot-row">
        <text class="label">监理单位：</text>
        <text class="value">{{goods.jianlidanwei || '-'}}</text>
      </div>
      <div class="bot-row">
        <text class="label">乡镇联系人：</text>
        <text class="value">{{goods.xiangzhenname || '-'}}</text>
      </div>
      <div class="bot-row">
        <text class="label">乡镇电话：</text>
        <text class="value">{{goods.xiangzhenphone || '-'}}</text>
      </div>
      <div class="bot-row">
        <text class="label">村联系人：</text>
        <text class="value">{{goods.cunname || '-'}}</text>
      </div>
      <div class="bot-row">
        <text class="label">村电话：</text>
        <text class="value">{{goods.cunphone || '-'}}</text>
      </div>
    </div>
    <ul class="listbox">
      <li v-for="(item,index) in biaozhunDOList" :key="index">{{item.gongchengName}}</li>
    </ul>
  </div>

  <script>
    const BASE_API = "https://jianliapi.jiashengqizhi.com/m.api";

    const App = {
      data() {
        return {
          counter: 0,
          message: "111",
          biaozhunDOList: [],
          goods: {},
          qrCode: 1702547393020
          //arCode:this.$route.query.qrCode
        }
      },
      mounted() {
        this.qrCode = this.getRequest();
        this.getData();
      },

      methods: {
        getRequest() {
          var isOk = false;
          var url = location.search; //获取url中"?"符后的字串
          var theRequest = new Object();
          if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            strs = str.split("&");
            for (var i = 0; i < strs.length; i++) {
              if (strs[i].split("=")[0] == "qrCode") {
                isOk = true;
              }
              theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
            }
          }
          if (!isOk) return this.qrCode;
          else return theRequest['qrCode'];
        },
        async getData() {
          var that = this
          $.ajax({
            url: BASE_API, // 请求地址
            type: 'post', // 请求方式
            data: {
              _gp: 'admin.userShop',
              _mt: 'qrCodeDetail',
              qrCode: this.qrCode
            }, //携带到后端的参数
            contentType: 'application/x-www-form-urlencoded', // 传参格式（默认为表单） json为application/json
            dataType: 'json', //期望后端返回的数据类型
            success: function (res) {
              console.log('getAreaShopInfo===>res', res);
              that.goods = res.data;
              that.biaozhunDOList = res.data.biaozhunDOList;
              that.biaozhunDOList = JSON.parse(JSON.stringify(that.biaozhunDOList));
              console.log('this.biaozhunDOList===>res', that.biaozhunDOList);
              that.message = 'adfdafaddfadaf, Vue!'
              console.log('this.message===>res', this.message);
            }, // 成功的回调函数 res就是后端响应回来的数据
            error: function (err) {
              console.log('err', err);
            } // 失败的回调函数
          })
        }
      }
    }
    Vue.createApp(App).mount('#app');
  </script>
  <style>
    body {
      padding: 0;
      margin: 0;
      height: 100%;
      padding: 0;
      background: #030e1f;
      color: #fff;
      border: none;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
        Arial, 'PingFang SC', 'WenQuanYi Micro Hei', 'Microsoft YaHei', '微软雅黑', sans-serif;
    }

    h1 {
      padding: 20px;
      text-align: center;
    }

    button {
      border-radius: 5px;
      font-size: 18px;
      background-color: cornflowerblue;
      color: #fff;
      margin: 0 auto;
      text-align: center;
      line-height: 40px;
      height: 40px;
      padding: 0 20px;
      border: none;
      cursor: pointer;
      display: flex;
    }

    .introduce-section {
      padding: 20px;
      line-height: 40px;
      font-size: 16px;
    }

    .introduce-section .title,
    .introduce-section .bot-row {
      display: flex;
    }


    .introduce-section .label {
      width: 15%;
      text-align: right;
    }

    .introduce-section .value {
      width: 70%;
    }

    #app {
      width: 1024px;
      margin: 30px auto;
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    }

    .listbox {
      padding: 0;
      margin: 0;
      line-height: 40px;
      list-style: none;
    }

    .listbox li {
      padding: 0 30px;
    }

    .progress-box {
      display: flex;
    }

    .progress-box .progress-bar {
      width: 100%;
      height: 20px;
      display: inline-flex;
    }

    .progress-box .progress-container {
      width: 100%;
      height: 14px;
      margin: 13px 0;
      background-color: #a9a8a8;
      border-radius: 10px;
      overflow: hidden;
      font-size: 12px;
      line-height: 14px;
      text-indent: 10px;
    }

    .progress-box .progress {
      height: 100%;
      color: #fff;
      background-color: #50b003;
      transition: width 0.3s ease-in-out;
    }
  </style>
</body>

</html>